<template>
    <div>
        <!-- 表格 -->
        <table width="600px" border="1px" cellspacing="0" align="center">
            <tr class="title">
                <td>编号</td>
                <td>姓名</td>
                <td>电话</td>
                <td>地址</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
            <tr class="content" v-for="user in users">
                <td>{{ user.id }}</td>
                <td>{{ user.name }}</td>
                <td>{{ user.phone }}</td>
                <td>{{ user.address }}</td>
                <td>{{ user.status }}</td>
                <td>
                    <button @click="deleleUser(user.id)">删除</button>
                </td>
            </tr>
        </table>

        <!-- 添加 -->
        <form>
            <p>
                姓名：<input type="text" v-model="user.name">
            </p>
            <p>
                电话：<input type="text" v-model="user.phone">
            </p>
            <p>
                地址：<input type="text" v-model="user.address">
            </p>
            <p>
                <button type="button" @click="addUser">添加</button>
            </p>
        </form>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data() {
        return {
            // 用户列表
            users: [],
            // 新增用户信息
            user: {
                name: '',
                phone: '',
                address: ''
            },
        }
    },
    created(){
        axios.get('http://ums.tangxiaoyang.vip/api/users/list')
                .then(res => {
                    if(res.data.status === 200){
                        this.users = res.data.data
                    }else{
                        console.log(res.data.msg)
                    }
                })
                .catch(err => {
                    console.log(err)
                })
    }
}
</script>

<style>
.title {
    text-align: center;
    font-weight: bold;
}

.content {
    text-align: center;
}

form {
    width: 600px;
    margin: 0 auto;
    text-align: center;
}
</style>